<template>
  <div style="background-color: white; flex: 1">
    <div style="margin-top: 10px">
      <el-steps
        class="custom-steps"
        :active="active"
        finish-status="success"
        :process-status="processStatus"
        align-center
      >
        <el-step title="设备开机"></el-step>
        <el-step title="网络连接状态进行初始化与自检"></el-step>
        <el-step title="电控设备进行通电和连接"></el-step>
        <el-step title="电控设备进行初始化与自检"></el-step>
      </el-steps>

      <!-- <p class="description">开机自检界面</p> -->
      <p class="description" style="color: red">激光器启动异常</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopMenu",

  data() {
    return {
      screenHeightPx: this.screenHeight + "px",
      screenHeight: 0,
      pageTitle: "1111",
      active: 2,

      // wait / process / finish / error / success
      processStatus: "error",
    };
  },
};
</script>

<style scoped>
.top-menu {
  background-color: #333;
  color: white;
  padding: 10px;
}

.top-menu a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
  display: inline-block;
}

.top-menu a.active {
  font-weight: bold;
}

/* 设置步骤条颜色 */
/* :deep .custom-steps .el-step__line {
  background-color: #d3dce6;
} */

:deep .custom-steps .el-step__title.is-process {
  color: hwb(55 10% 23%); /* 设置正在进行步骤标题颜色 */
}

/* 设置待进行步骤标题颜色 */
/* :deep .custom-steps .el-step__title.is-wait {
  color: #909399; 
} */

/* 设置已完成步骤标题颜色 */
/* :deep .custom-steps .el-step__title.is-finish {
  color: #52c41a; 
} */

/* 设置文字图标颜色 */
/* 设置文字图标边框颜色 */
/* :deep .custom-steps .el-step__icon.is-text {
  color: #52c41a; 
  border-color: #d3dce6; 
} */

:deep .custom-steps .el-step__icon.is-process .is-text {
  background-color: hwb(55 10% 23%); /* 设置正在进行的文字图标背景颜色 */
}

/* 设置已完成的文字图标背景颜色 */
/* :deep .custom-steps .el-step__icon.is-finish .is-text {
  background-color: #52c41a; 
} */
</style>
